<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="pay_type" v-if="type==1">
			<view class="pay_title">钱包地址类型</view>
			<uv-radio-group
				style="margin-top: 10px;"
				v-model="paytypevalue" 
				placement="column" 
				size="22"
				iconPlacement="right">
				<uv-radio style="margin-bottom: 16px; margin-top: 8px;" v-for="(item,index) in paytype" :key="index" :name="item.name"  activeColor="#db6969" :value="item.name">{{item.name}}</uv-radio>
			</uv-radio-group>
		</view>
		<view class="skm" @click="uploadEvent">
			<image :src="upload" mode=""></image>
		</view>
		<view class="new_card" @click="SubmitEvent">保存</view>
		<payKeyboard v-if="showKeyBoard" title="Mi安全键盘" @success="enterSuccess" @close="close"></payKeyboard> 
	</view>
</template>

<script>
	import { API_BASE_URL} from '@/utils/appConfig.js';
	import payKeyboard from '@/components/mi-payKeyboard/mi-payKeyboard.vue';
	import {setPay} from '@/api/bonus.js'
	export default{
		components: { payKeyboard },
		data(){
			return{
				navstyle: {
					title: "添加二维码",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				showKeyBoard:false,
				paytype: [{
					name: "微信二维码"
				}, {
					name: "支付宝二维码"
				}],
				type:1,
				paytypevalue: "微信二维码",
				upload:'../../static/img/bonus/scskm.png',
				setPayData: {
					name: "",
					bankName: "",
					cardNum: "",
					img: "",
					type:null,
					paypassword: ""
				}
			}
		},
		onLoad: function(option) {
			if (option.id) {
				this.navstyle.title="编辑二维码"
				this.type = 2
				let n = JSON.parse(uni.getStorageSync("qrcode"))
				let e = {
					id: option.id,
					name: "",
					bankName: "",
					cardNum: "",
					type: n.type,
					img: n.img
				};
				this.upload = n.img;
				this.setPayData = e;
				uni.removeStorageSync("qrcode")
			} else{
				this.type =1
				this.navstyle.title="添加二维码"
			}
			
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/bonus/qrcode_list' // 替换成上一页的路径
				});
			
			},
			SubmitEvent(){
				if(this.upload == "../../static/img/bonus/scskm.png"){
					uni.showToast({
						title: "请上传二维码",
						icon: "success",
						duration: 2000
					});
					return
				}
				this.showKeyBoard = true;
			},
			// 输入正确的回调
			enterSuccess(password) {
				this.setPayData.img = this.upload;
				this.paytypevalue == "微信二维码" ? this.setPayData.type = 1 : this.setPayData.type = 2
				this.setPayData.paypassword = password;
				setPay(this.setPayData).then(response=>{
					if(response.code == 1){
						uni.showToast({
							title: response.msg,
							icon: "success",
							duration: 2000
						});
						uni.reLaunch({
						  url: '/pages/bonus/qrcode_list' // 替换成上一页的路径
						});
						
					}
					
				})
				this.showKeyBoard = false
			},
			// 点击[取消] 关闭输入框 的回调
			close(){
				this.showKeyBoard = false
			},
			uploadEvent() {
				var t = this;
				uni.chooseFile({
					count: 1,
					type: "image",
					success: function(e) {
						var n = e.tempFilePaths[0];
						t.uploadImagesEvent(n),
						uni.showLoading({
							title: "上传中",
							mask: !0
						})
					}
				})
			},
			uploadImagesEvent(t) {
				var e = this;
				uni.uploadFile({
					url: API_BASE_URL + "/index/upload",
					filePath: t,
					header: {
						token: uni.getStorageSync("token")
					},
					success: function(t) {
						var n = JSON.parse(t.data);
						1 != n.code && "1" != n.code || (e.upload = n.data.fullurl,
						uni.showToast({
							title: n.msg,
							icon: "success",
							duration: 2000
						}))
					},
					fail: function(t) {
						console.log(t, "上传失败")
					},
					complete: function() {
						uni.hideLoading()
					}
				})
			},
		}
	}
</script>

<style>
	.pay_type {
	    display: flex;
	    flex-direction: column;
	    align-items: left;
	    width: 95%;
	    padding: 10px;
	    background-color: #fff;
	    margin: 10px auto 10px auto;
	    border-radius: 10px;
	    height: auto;
	}
	.pay_title{
	    font-weight: 700;
	}
	.skm{
	    width: 100%;
	    margin-top: 10px;
	    text-align: center;
	}
	.skm image{
	    width: 213px;
	    height: 213px;
	    border: #ed6266 solid 1px;
	    border-radius: 5px;
	}
	.new_card {
	    color: #fff;
	    width: 85%;
	    margin: 20px auto;
	    padding: 10px;
	    background: linear-gradient(#d66c6b, #ed6266);
	    border-radius: 21px;
	    text-align: center;
	}
</style>